---
title: Progress
description: Used to display the progress status for a task.
links:
  source: components/progress
  storybook: components-progress--basic
  recipe: progress
  ark: https://ark-ui.com/react/docs/components/progress-linear
---

<ExampleTabs name="progress-basic" />

## Usage

```tsx
import { Progress } from "@chakra-ui/react"
```

```tsx
<Progress.Root>
  <Progress.Track>
    <Progress.Range />
  </Progress.Track>
  <Progress.Label />
  <Progress.ValueText />
</Progress.Root>
```

## Examples

### Sizes

Use the `size` prop to change the size of the progress bar.

<ExampleTabs name="progress-with-sizes" />

### Variants

Use the `variant` prop to change the visual style of the progress bar.

<ExampleTabs name="progress-with-variants" />

### Colors

Use the `colorPalette` prop to change the color of the progress bar.

<ExampleTabs name="progress-with-colors" />

### Inline Label

Compose the `Progress.Label` and `Progress.ValueText` components to create an
inline label for the progress bar.

<ExampleTabs name="progress-with-inline-label" />

### Info tip

Use the `info` prop to add a tooltip to the progress bar.

<ExampleTabs name="progress-with-label-info" />

### Indeterminate

Set the value to `null` to show an indeterminate progress bar.

<ExampleTabs name="progress-indeterminate" />

### Stripes

Set the `striped` prop to `true` to add stripes to the progress bar.

<ExampleTabs name="progress-with-stripes" />

### Animated Stripes

Set the `animated` prop to `true` to animate the stripes.

<ExampleTabs name="progress-with-animated-stripes" />

### Closed Component

Here's how to create a closed component using the `Progress` component.

<ExampleCode name="progress-closed-component" />

## Props

### Root

<PropTable component="Progress" part="Root" />
